/**
 * @description 修改视频尺寸
 * @author wangfupeng
 */

import { IModalMenu, IDomEditor, DomEditor, genModalInputElems, genModalButtonElems } from '@wangeditor/editor';
import { nanoid } from 'nanoid';
import { SlateTransforms, SlateNode } from '@wangeditor/editor';

function genRandomStr(prefix: string = 'r'): string {
	return `${prefix}-${nanoid()}`;
}
/**
 * 生成唯一的 DOM ID
 */
function genDomID(): string {
	return genRandomStr('davinci-media');
}

class EditorVideoSizeMenu implements IModalMenu {
	modalWidth: number;
	iconSvg?: string | undefined;
	hotkey?: string | undefined;
	alwaysEnable?: boolean | undefined;
	width?: number | undefined;
	readonly title = '尺寸设置';
	readonly tag = 'button';
	readonly showModal = true; // 点击 button 时显示 modal
	// readonly modalWidth = 'auto'
	private content!: HTMLDivElement;
	private readonly widthInputId = genDomID();
	// private readonly heightInputId = genDomID()
	private readonly buttonId = genDomID();

	private getSelectedVideoNode(editor: IDomEditor): SlateNode | null {
		return DomEditor.getSelectedNodeByType(editor, 'davinci-media');
	}

	getValue(editor: IDomEditor): string | boolean {
		// 插入菜单，不需要 value
		return '';
	}

	isActive(editor: IDomEditor): boolean {
		// 任何时候，都不用激活 menu
		return false;
	}

	exec(editor: IDomEditor, value: string | boolean) {
		// 点击菜单时，弹出 modal 之前，不需要执行其他代码
		// 此处空着即可
	}

	isDisabled(editor: IDomEditor): boolean {
		if (editor.selection == null) return true;

		const videoNode = this.getSelectedVideoNode(editor);
		if (videoNode == null) {
			// 选区未处于 video node ，则禁用
			return true;
		}
		return false;
	}

	getModalPositionNode(editor: IDomEditor): SlateNode | null {
		return this.getSelectedVideoNode(editor);
	}

	getModalContentElem(editor: IDomEditor): HTMLDivElement {
		// return $('<div><p>修改尺寸</p><p>修改尺寸</p><p>修改尺寸</p><p>修改尺寸</p></div>')[0]

		const { widthInputId, buttonId } = this;
		const [widthContainerElem, inputWidthElem] = genModalInputElems('宽度', widthInputId, 'auto');

		const { width: w } = this.getSelectedVideoNode(editor);

		const [buttonContainerElem, buttonElem] = genModalButtonElems(buttonId, '确认');
		if (this.content == null) {
			const $content = document.createElement('div');
			this.content = $content;
		}

		const $content = this.content;
		const $inputWidth = inputWidthElem;
		const confirmBtn = buttonElem;

		$inputWidth.value = w ?? 500;
		while ($content.firstChild) {
			$content.removeChild($content.firstChild);
		}
		$content.appendChild(widthContainerElem);
		$content.appendChild(buttonContainerElem);
		// 绑定事件（第一次渲染时绑定，不要重复绑定）
		confirmBtn.addEventListener('click', e => {
			e.preventDefault();
			const rawWidth = $inputWidth.value;
			const numberWidth = parseInt(rawWidth);
			const width = numberWidth ? numberWidth.toString() : 'auto';

			// this.modalWidth = width
			editor.restoreSelection();

			// 修改尺寸
			SlateTransforms.setNodes(
				editor,
				{ width },
				{
					match: n => DomEditor.checkNodeType(n, 'davinci-media')
				}
			);

			editor.hidePanelOrModal(); // 隐藏 modal
		});

		setTimeout(() => {
			$inputWidth.focus();
		});

		return $content;
	}
}

export default EditorVideoSizeMenu;
